<template>
  <transition name="fade">
    <div class="toast" v-if="visible">
      <div class="message" :class="type" >
        <i class="icon-type iconfont" :class="'icon-'+type"></i>
        <div class="content">{{content}}
          <i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
  export default {
    name: "MyMessage",
    data() {
    return {
      content: '',
      time: 1000,
      visible: true,
      type:'info',//'success','warning','error'
      hasClose:false,
    }
  },
  mounted() {
    this.close()
  },
  methods: {
    close() {
      window.setTimeout(() =>{
        this.visible = false
      }, this.time);
    }
  }
  }
</script>
<style lang="scss" >
  $success-color:#282828;
  $info-color:#2d8cf0;
  $warning-color:#f90;
  $error-color:#ed4014;
  .toast{
    width: 100%;
    height:100vh;
    text-align: center;
    position: fixed;
    top: 0;
    z-index:10000;
    &:before{
      display: inline-block;
      height: 100%;
      vertical-align: middle;
      content: " ";
    }
  }
  .message{
    font-size: 0.32rem;
    font-family: "PingFang SC-Regular";
    max-width: 90%;
    box-sizing: border-box;
    border-radius: 0.4rem;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    background-color: #FFFFFF;
    transition: opacity .3s, transform .4s;
    overflow: hidden;
    padding: 0.24rem 0.58rem;
    z-index: 100;
    height: 0.8rem;
    background: #000000;
    opacity: 0.8;
    font-weight: 400;
    color: #FFFFFF;
    &.fade-enter,
    &.fade-leave-active {
     opacity:0;
     transform:translate(-50%, -100%);
   }
  &.info{
     color: $info-color;
   }
  &.success{
     background-color: #FFFFFF;
     color: $success-color;
     border-color:#e1f3d8;

   }
  &.warning{
     background-color: #fdf6ec;
     color: $warning-color;
     border-color:#faecd8
   }
  &.error{
     background-color: #fef0f0;
     color: $error-color;
     border-color:#fde2e2;
   }

  .icon-type{
    float: left;
    font-size: 16px;
    margin-right: 10px;
    vertical-align: middle;
  }
  .iconfont{font-size: inherit;}
  .content{
    display: table-cell;
    vertical-align: middle;
  &.hasClose{
     padding-right: 25px;
   }
  }
  .btn-close{
    position: absolute;
    top: 9px;
    right: 15px;
  }

  }
</style>
